<template>
  <el-aside :width="$store.state.isCollapse ? '195px' : '64px'">
    <!-- 图标 -->
    <div class="logo">
      <img
        :src="getImageUrl('logo')"
        alt=""
        v-show="$store.state.isCollapse"
        class="p1"
      />
      <img
        :src="getImageUrl('logo2')"
        alt=""
        v-show="!$store.state.isCollapse"
        class="p2"
      />
    </div>
    <!-- 侧边菜单栏 -->
    <div class="menu-scrollbar">
      <el-scrollbar>
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#0356d0"
          text-color="#fff"
          :collapse="!$store.state.isCollapse"
          :collapse-transition="false"
          :unique-opened="true"
          :default-active="defaultActive"
          @open="handleOpen"
          @close="handleClose"
        >
          <SideMenuItem :menuList="menuList"></SideMenuItem>
          <!-- 一级菜单 -->
          <!-- <el-menu-item
            :index="item.path"
            v-for="item in noChildren()"
            :key="item.path"
            @click="ClickMenu(item)"
          >
            component用于渲染动态的组件图标,在main.js中已经注册。:is动态绑定属性的方式来指定要渲染的组件。
            <component class="icons" :is="item.icon"></component>
            <template #title>
              <span>{{ item.label }}</span>
            </template>
          </el-menu-item>
          二级菜单
          <el-sub-menu
            :index="item.path"
            v-for="item in hasChildren()"
            :key="item.path"
          >
            <template #title>
              <component class="icons" :is="item.icon"></component>
              <span>{{ item.label }}</span>
            </template>
            二级菜单下的子菜单
            <el-menu-item-group>
              <el-menu-item
                :index="subItem.path"
                v-for="(subItem, subIndex) in item.children"
                :key="subIndex"
                @click="ClickMenu(subItem)"
              >
                <component class="icons" :is="subItem.icon"></component>
                <span>{{ subItem.label }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu> -->
        </el-menu>
      </el-scrollbar>
    </div>
  </el-aside>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { computed, ref, watch } from "vue";
import { useStore } from "vuex";
import SideMenuItem from "./SideMenuItem.vue";
const router = useRouter();
let route = useRoute();
let store = useStore();
let getImageUrl = (photo) => {
  //   console.log(import.meta.url);
  //   console.log(new URL("../assets/images/user.png", import.meta.url));
  return new URL(`../assets/images/${photo}.png`, import.meta.url).href;
};
// 侧边栏数据
// const list = [
//   {
//     path: "/plccontent",
//     name: "plccontent",
//     label: "PLC连接",
//     icon: "Promotion",
//     url: "PLCManage/ContentManage",
//   },
//   {
//     path: "/user",
//     name: "user",
//     label: "用户管理",
//     icon: "User",
//     url: "UserManage/UserManage",
//   },
//   {
//     label: "其他",
//     icon: "location",
//     path: "/other",
//     children: [
//       {
//         path: "/page1",
//         name: "page1",
//         label: "页面1",
//         icon: "setting",
//         url: "Other/PageOne",
//       },
//       {
//         path: "/page2",
//         name: "page2",
//         label: "页面2",
//         icon: "setting",
//         url: "Other/PageTwo",
//       },
//       {
//         path: "/page3",
//         name: "page3",
//         label: "页面3",
//         icon: "setting",
//         url: "Other/PageThree",
//       },
//       {
//         path: "/page4",
//         name: "page4",
//         label: "页面4",
//         icon: "setting",
//         url: "Other/PageFour",
//       },
//     ],
//   },
// ];
// const list = JSON.parse(localStorage.getItem("menu"));
// 取到vuex中的菜单数据，需要做持久化，方便之后监听
// const menulist = store.state.menu;
const menuList = ref();
menuList.value = store.state.menu;

// 默认选中菜单
const defaultActive = ref("");
watch(
  () => route.path,
  (newVal) => {
    defaultActive.value = newVal;
  },
  {
    immediate: true,
  }
);

const handleOpen = (key, keyPath) => {};
const handleClose = (key, keyPath) => {};
</script>
<style lang="less">
.el-menu {
  border-right: none;
  // .el-sub-menu {
  //   display: grid;
  // }
}
.icons {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.logo {
  position: fixed;
  top: 0px; /* 调整图片距离顶部的位置 */
  left: 0px; /* 让图片固定在左侧 */
  z-index: 999; /* 确保图片位于其他内容之上 */
  background-color: #0356d0; /* 设置图片的背景颜色 */
}

.p1 {
  width: 195px;
  height: 70px;
  text-align: center;
  // background-color: rgb(9, 139, 139);
}
.p2 {
  width: 64px;
  height: 70px;
  text-align: center;
}
.menu-scrollbar {
  margin-top: 70px; //滚动条空出图片高度
  height: calc(100% - 70px); //计算块高度，scrollbar继承使用
}

// .el-menu-item:hover {
//   background-color: red;
// }
</style>
